본문으로 건너뛰기

부록 B. 스코프와 렉시컬 this

B.1 동적 스코프​

  • 렉시컬 스코프: 변수를 찾을 때 작성된 위치 기준으로 결정됨
  • 동적 스코프: 호출한 위치 기준으로 런타임에 결정됨
function foo() {
  console.log(a); // 2
}

function bar() {
  var a = 3;
  foo();
}

var a = 2;
bar();

→ 자바스크립트는 렉시컬 스코프 기반이므로 a = 2가 출력됨.

정리:

  • 렉시컬 스코프: 선언된 위치 기준
  • 동적 스코프: 호출된 위치 기준

B.2 폴리필링 블록 스코프​

예전 방식: catch 블록​

try {
  throw 2;
} catch (a) {
  console.log(a);
}
console.log(a);  // ReferenceError
  • catch 블록은 블록 스코프를 형성함

B.2.1 트레이서 (Tracer)​

  • ES6 기능을 ES5로 변환해주는 컴파일러
  • 블록 스코프도 변환 가능
  • 내부 구현은 추정일 뿐 실제는 확인 필요

B.2.2 암시적 vs 명시적 블록​

let (a = 2) {
  console.log(a);  // 2
}
console.log(a);    // ReferenceError
  • 위 문법은 공식적으로 지원되지 않음
  • let-er 라이브러리로 구현 가능
  • 실제 변환 예시:
{
  let a = 2;
  console.log(a);
}
console.log(a);  // ReferenceError

B.2.3 성능 관련​

왜 IIFE를 남용하지 않나?​

  1. try/catch가 느리다는 주장 (→ 상관관계 불분명)
  2. IIFE 내부에서는 this, return, break, continue 등의 의미가 달라질 수 있음

B.3 렉시컬 this​

Arrow Function​

var foo = (a) => {
  console.log(a);
};
foo(2); // 2

this와의 관계​

var obj = {
  id: 'awesome',
  cool: function coolFn() {
    console.log(this.id);
  }
};

var id = "not awesome";

obj.cool();           // 'awesome'
setTimeout(obj.cool, 100);  // 'not awesome'
  • setTimeout으로 전달될 때 this가 바뀌어 전역 컨텍스트를 참조하게 됨
  • arrow function은 this를 선언된 위치의 스코프에 바인딩함